<!--这个是一个全屏播放的视频，上下黑边，宽度100%;-->
<template>
    <div id="Video" class="video-components">
        <div class="video-wrap">
            <img class="video-icon" v-if="!notDefaultBtn" id="videoBtn" @click="playVideo" :src="staticImageUrl('images/video_play_btn.png')" alt=""/>
            <slot name="videoIcon" v-if="notDefaultBtn"></slot>
            <div @click="closeVideo" class="js_videoDiv video-border" v-if="videoShow">
                <video
                        ref="video"
                        class="js_myVideo myVideo"
                        x5-playsinline=""
                        webkit-playsinline="true"
                        x-webkit-airplay="true"
                        playsinline
                        x5-video-player-fullscreen='false'
                        x5-video-ignore-metadata='true'
                        controls="controls"
                        @ended="closeVideo">
                    <source :src="shopVideo.videoUrl" type='video/mp4'>
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>
    </div>
</template>
<script>

    import  $ from 'jquery'

    export default {
        name: 'Video',
        props: {
            shopVideoProp:{
                type: Object
            },
            notDefaultBtn:{
                type:Boolean
            }
        },
        data() {
            return {
                videoShow:false,
                shopVideo:{
                    videoUrl:'',
                }
            }
        },
        mounted(){
            this.shopVideo = Object.assign({},this.shopVideo,this.shopVideoProp);
            let that = this;
            let bool = false;
            window.addEventListener("popstate", function(e) {
                if (bool && that.videoShow) {
                    that.videoShow = false;
                }
            }, false);
            setTimeout(()=> {
                bool = true;
            }, 10);

        },
        methods:{
            playVideo(){
                let that = this;
                this.videoShow = true;
                $('body audio').each((audioIndex,audioEle)=>{
                    audioEle.pause();
                    $('.new-open-music').hide()
                    $('.new-close-music').show()
                });
                setTimeout(()=> {
                    this.$refs.video.play();
                    // this.$refs.video.addEventListener('pause',function(){
                    //     that.closeVideo()
                    // })
                }, 100);
            },
            closeVideo(){
                this.videoShow = false;
            },
            /*让手机点击后退之后还是原来的地址*/
            pushHistory() {
                let params = window.location.href;
                window.history.pushState(null, null, params);
            }
        }
    }
</script>
<style scoped>
    .video-border{
        background: rgba(0,0,0,1);
        position: fixed;
        z-index: 1050;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .myVideo{
        width: 100%;
    }
    .video-wrap{
        position: relative;
        width: 100%;
        height: 100%;
        left:0;
        top: 0;
    }
    .video-icon{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 1030;
        width: .4rem;
        height: .4rem;
    }
    .video-components{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: .4rem;
        margin: auto;
        height: .4rem;
    }
</style>